import {
  Group,
  Panel,
  text,
  gravity,
  Color,
  LayoutSpec,
  log,
  vlayout,
  scroller,
  layoutConfig,
  image,
  ScaleType,
  Image,
} from "doric";

const imageUrl =
  "https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg";
const img_base64 =
  "";

function label(str: string) {
  return text({
    text: str,
    textSize: 16,
  });
}

@Entry
class ImageDemo extends Panel {
  build(rootView: Group): void {
    let imageView: Image;
    scroller(
      vlayout(
        [
          text({
            text: "Image Demo",
            layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
            textSize: 30,
            textColor: Color.WHITE,
            backgroundColor: Color.parse("#eb4d4b"),
            textAlignment: gravity().center(),
            height: 50,
          }),
          label("Gif"),
          image({
            imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world-cup_2014_42.gif",
            scaleType: ScaleType.ScaleToFill,
            loadCallback: function (ret) {
              log("this");
              log("loadCallback", ret);
            },
          }),
          label("APNG"),
          image({
            imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world_cup_2014_42.png",
            loadCallback: (ret) => {},
          }),
          label("Animated WebP"),
          image({
            imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp",
            loadCallback: (ret) => {},
          }),
          label("WebP"),
          (imageView = image({
            imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp",
            loadCallback: (ret) => {
              if (ret) {
                imageView.width = ret.width;
                imageView.height = ret.height;
              }
            },
          })),
          label("ScaleToFill"),
          image({
            imageUrl,
            width: 300,
            height: 300,
            isBlur: true,
            border: {
              width: 2,
              color: Color.GRAY,
            },
            scaleType: ScaleType.ScaleToFill,
            layoutConfig: layoutConfig().just(),
            loadCallback: (ret) => {},
          }),
          label("ScaleAspectFit"),
          image({
            imageUrl,
            width: 300,
            height: 300,
            border: {
              width: 2,
              color: Color.GRAY,
            },
            scaleType: ScaleType.ScaleAspectFit,
            layoutConfig: layoutConfig().just(),
          }),
          label("ScaleAspectFill"),
          image({
            imageUrl,
            width: 300,
            height: 300,
            border: {
              width: 2,
              color: Color.GRAY,
            },
            scaleType: ScaleType.ScaleAspectFill,
            layoutConfig: layoutConfig().just(),
          }),
          label("ImageBase64"),
          image({
            imageBase64: img_base64,
            width: 300,
            height: 300,
            border: {
              width: 2,
              color: Color.GRAY,
            },
            scaleType: ScaleType.ScaleAspectFill,
            layoutConfig: layoutConfig().just(),
          }),
        ],
        {
          layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
          gravity: gravity().center(),
          space: 10,
        }
      ),
      {
        layoutConfig: layoutConfig().most(),
      }
    ).in(rootView);
  }
}
